<template>
  <div class="container">
    <div class="left-img"></div>
    <div class="right-main">
      <div class="header">
        <div class="title"><h1>小鑫账号</h1></div>
        <div class="help">
          <ul>
            <li><a href="javascript:;">用户协议</a></li>
            <li><a href="javascript:;">隐私政策</a></li>
            <li><a href="javascript:;">帮助中心</a></li>
            <li><a href="javascript:;">|</a></li>
            <li><a href="javascript:;">中文(简体)</a></li>
          </ul>
        </div>
      </div>
      <div class="login-register">
        <div class="btn">
          <div class="login">
            <button @click="changeStyle" :style="btnStyleLogin">登录</button>
          </div>
          <div class="register">
            <button @click="changeStyle" :style="btnStyleRegister">注册</button>
          </div>
          <div class="line" ref="line"></div>
        </div>
        <router-view></router-view>
        <div class="other-login">
          <h3><a href="javascript:;">其它登录方式</a></h3>
          <ul>
            <li>
              <a href="javascript:;"
                ><img src="../../assets/images/login-register/qq.jpg" alt=""
              /></a>
            </li>
            <li>
              <a href="javascript:;"
                ><img src="../../assets/images/login-register/wx.jpg" alt=""
              /></a>
            </li>
            <li>
              <a href="javascript:;"
                ><img src="../../assets/images/login-register/zfb.jpg" alt=""
              /></a>
            </li>
            <li>
              <a href="javascript:;"
                ><img src="../../assets/images/login-register/wb.jpg" alt=""
              /></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, onBeforeMount } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "LoginOrRegister",
  setup() {
    const line = ref(null);
    const btnStyleLogin = reactive({
      color: "#333",
      fontWeight: "bold",
    });
    const btnStyleRegister = reactive({
      color: "",
      fontWeight: "",
    });
    const router = useRouter();

    //登录or注册动画
    function changeStyle(e) {
      if (e.target.innerText === "登录") {
        (btnStyleLogin.color = "#333"), (btnStyleLogin.fontWeight = "bold");
        (btnStyleRegister.color = "#bbb"),
          (btnStyleRegister.fontWeight = "normal");
        line.value.style.transform = "translateX(0)";
        router.push({ name: "login" });
      } else {
        (btnStyleRegister.color = "#333"),
          (btnStyleRegister.fontWeight = "bold");
        (btnStyleLogin.color = "#bbb"), (btnStyleLogin.fontWeight = "normal");
        line.value.style.transform = "translateX(78px)";
        router.push({ name: "register" });
      }
    }
    //刷新进入Login
    onBeforeMount(() => {
      router.push({ name: "login" });
    });
    return {
      btnStyleLogin,
      btnStyleRegister,
      changeStyle,
      line,
    };
  },
};
</script>

<style lang="less" scoped>
@media screen and (max-width: 1000px) {
  .left-img {
    width: 0;
  }
}
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  .left-img {
    margin-right: calc(100% - 375px);
    height: 100%;
    background: url(../../assets/images/login-register/loginOrRegister.jpg)
      no-repeat;
    background-size: 375px 100%;
  }
  .right-main {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 800px;
    width: calc(100% - 375px);
    height: 100%;

    .header {
      display: flex;
      justify-content: space-between;
      height: 80px;
      line-height: 80px;
      .title {
        margin-left: 20px;
        h1 {
          font-size: 26px;
          letter-spacing: 1px;
          &::before {
            content: "";
            display: inline-block;
            margin-right: 8px;
            width: 40px;
            height: 40px;
            background-image: url(../../assets/images/header/siteHeader/logo.bmp);
            background-size: 40px 40px;
            border-radius: 25%;
            vertical-align: middle;
          }
        }
      }
      .help {
        ul {
          display: flex;
          margin-right: 30px;
          li {
            a {
              display: block;
              padding: 0 10px;
              font-size: 14px;
              color: #838383;
              &:hover {
                color: orange;
              }
            }
            &:last-child {
              a {
                position: relative;
                &::after {
                  content: "";
                  position: absolute;
                  top: 35px;
                  margin-left: 5px;
                  height: 0;
                  border: 5px solid transparent;
                  border-top-color: #838383;
                }
              }
              &:hover a {
                &::after {
                  transition: 0.3s linear;
                  transform: rotate(180deg);
                  border-top-color: orange;
                }
              }
            }
          }
        }
      }
    }
    .login-register {
      margin: 20px auto;
      padding: 40px 45px;
      width: 450px;
      box-shadow: 0 20px 50px 0 hsl(0deg 0% 64% / 10%);
      .btn {
        position: relative;
        display: flex;
        padding-bottom: 10px;
        .register {
          margin-left: 30px;
        }
        button {
          height: 30px;
          font-size: 24px;
          color: #bbb;
          background: 0;
          border: 0;
          cursor: pointer;
        }
        .line {
          position: absolute;
          top: 33px;
          left: -1px;
          width: 50px;
          height: 4px;
          background-color: #ff5c00;
          border-radius: 20px;
          transition: 0.5s;
        }
      }
      .other-login {
        overflow: hidden;
        width: 320px;
        height: 95px;
        text-align: center;
        h3 {
          margin: 15px 0 6px;
          a {
            font-size: 17px;
            color: #aaa;
          }
        }
        ul {
          display: flex;
          justify-content: space-evenly;
          li {
            a {
              display: block;
              width: 50px;
              height: 50px;
              img {
                width: 50px;
                height: 50px;
              }
            }
            &:nth-child(2) a img {
              width: 57px;
            }
          }
        }
      }
    }
  }
}
</style>